<template>
  <div>
    <Header v-if="shows == 'list'">
      <el-button size="small" type="primary" @click="add">新建文章</el-button>

      <div class="heads-right">
        <el-input
          v-model="name"
          placeholder="请输入名称"
          size="small"
          class="head-input"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="getList"
          ></el-button>
        </el-input>
      </div>
    </Header>
    <Main v-if="shows == 'list'" :data="listData" :footer-lock="totals > 10">
      <el-table-column label="文章标题" align="center">
        <template slot-scope="scope">
          <div
            style="width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
          >
            {{ scope.row.title }}
          </div>
          <div
            style="width: 100%; text-overflow: -o-ellipsis-lastline; color:#909399;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;"
          >
            {{ scope.row.subhead }}
          </div>
          <div>
            文章浏览量：{{
              scope.row.page_view
            }}&nbsp;&nbsp;|&nbsp;&nbsp;商品下单量：{{ scope.row.shop_sum }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="封面" align="center">
        <template slot-scope="scope">
          <img
            :src="$store.state.qiniu + scope.row.cover + $store.state.imgRotate"
            style="width: 30px;
                        height: 30px;
                        margin: 10px;
                        border: 1px solid #ccc;
                        border-radius: 6px;"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="文章商品数目"
        align="center"
        property="shop_count"
      ></el-table-column>
      <el-table-column
        label="更新时间"
        align="center"
        property="create_at"
      ></el-table-column>
      <el-table-column label="发布状态" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            style="display: block"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-text="scope.row.status == 0 ? '未发布' : '已发布'"
            @change="switchTag(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="250"
        class-name="tableoperation"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="edit(scope.row.article_id)"
          >
            编辑
          </el-button>
          <el-button size="mini" type="text" @click="upFrame(scope.row)">
            管理商品
          </el-button>
          <el-button size="mini" type="text" @click="del(scope.row.article_id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </Main>
    <Footer :total="totals">
      <el-pagination
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        @current-change="changes"
      >
      </el-pagination>
    </Footer>
    <article-add v-if="shows == 'add'" :article_id="articleId" @out="out" />
    <dialog-shop
      :dialog-visible="dialogShop"
      :data-json="dataJson"
      @close="close"
    />
  </div>
</template>
<script>
import {
  ARTICLELIST,
  DELARTICLE,
  ARTICLESTATUS,
  ARTICLESHOP
} from "../service";

export default {
  components: {
    dialogShop: () => import("./component/dialogShop"),
    articleAdd: () => import("./form")
  },
  data() {
    return {
      listData: [],
      isArr: [],
      totals: 0,
      pages: 1,
      dialogVisible1: false,
      dialogShop: false,
      dataJson: {},
      shows: "list",
      inputSearch: "",
      idxs: "",
      articleId: "",
      articleIdShop: "",
      name: ""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    add() {
      this.shows = "add";
      this.articleId = 0;
    },
    edit(articleId) {
      this.articleId = articleId;
      this.shows = "add";
    },
    upFrame(e) {
      this.articleIdShop = e.article_id;
      this.dataJson.shopDataList = e.apply_shop;
      this.dialogShop = true;
    },
    close(e) {
      if (e) {
        let arr = [];
        e.forEach(ele => {
          arr.push(ele.goods_id);
        });
        ARTICLESHOP({
          article_id: this.articleIdShop,
          apply_shop: arr.join(",")
        }).then(res => {
          let { code, msg } = res;
          if (code === 200) {
            this.getList();
            this.articleIdShop = "";
          }
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        });
      }
      this.dialogShop = false;
    },
    out() {
      this.shows = "list";
      this.getList();
    },
    changes(page) {
      this.pages = page;
      this.getList();
    },
    async getList() {
      await ARTICLELIST({
        page: this.pages,
        pageshow: 10,
        title: this.name
      }).then(({ code, data }) => {
        if (code === 200) {
          this.totals = data.count;
          data.list.forEach(ele => {
            ele.status = ele.status === 1;
          });
          this.listData = data.list;
        } else {
          this.listData = [];
          this.$message.error("获取失败");
        }
      });
    },
    async del(articleId) {
      await this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          DELARTICLE({ article_id: articleId }).then(({ code, msg }) => {
            if (code === 200) {
              this.getList();
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除!"
          });
        });
    },
    async switchTag(e) {
      await ARTICLESTATUS({
        article_id: e.article_id,
        status: e.status ? 1 : 0
      }).then(({ code, msg }) => {
        this.$message({
          message: msg,
          type: code === 200 ? "success" : "error"
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped></style>
